<template>
  <div class="security">
    <div class="top">
      <img src="../../assets/images/qr.png" alt="" @click="goback" />
      <p>{{$t("common.anquanyanzheng")}}</p>
    </div>
    <div class="titlea">
      <p>{{$t("common.qingshuruyouxiang")}} {{ userInfo.email }} {{$t("common.shoudaode")}}</p>
    </div>
    <div class="inputa">
      <input v-model="query.code" type="text" :placeholder="$t('common.youxiangyan')" />
      <p @click="sendEmailCode">
        {{
          sendEmailText === $t('common.fasongyanzhengma') ? sendEmailText : sendEmailText + "s"
        }}
      </p>
    </div>
    <div class="titleb">
      <p>{{$t("common.shuruzijin")}}</p>
    </div>
    <div class="inputb">
      <input v-model="password1" type="password" autocomplete="new-password"  :placeholder="$t('common.zijinmima')" />
      <!-- <p>粘贴</p> -->
    </div>
    <van-button type="info" class="button" @click="submit">{{$t("common.tijiao")}}</van-button>
    <!-- <div class="bottom">安全验证不可用？</div> -->
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { Toast } from "vant";
export default {
  computed: {
    ...mapGetters(["getUserInfo"]),
  },
  data() {
    return {
      userInfo: {},
      sendEmailText: this.$t('common.fasongyanzhengma'),
      // youxiangyan: this.$t('common.youxiangyan'),
      // zijinmima: this.$t('common.zijinmima'),
      // nonull: this.$t('common.yanbuweikong'),
      // bushaoyu: this.$t('common.mimabushaoyu'),
      // shengqing: this.$t('common.tishengqing'),
      // send: this.$t('common.fasongcheng'),
      query: {
        actualWithdrawalAmount: "",
        arrivalAddress: "",
        code: "",
        password: "",
        publicChain: "",
        quantity: "",
        serviceCharge: "",
        sourceAddress:'',
      },
      password1: "",
    };
  },
  activated () {
    this.sendEmailText = this.$t('common.fasongyanzhengma')
    this.userInfo = this.getUserInfo;
    this.query = this.$route.query;
    this.query={...this.userInfo,...this.query}
    this.password1 = ''
    console.log("query", this.query);
  },
  created() {

  },
  methods: {
    goback() {
      this.$router.go("-1");
    },
    async submit(){
        if(!this.query.code){
            Toast(this.$t('common.yanbuweikong'));
            return;
        }
        if(!this.password1){
            Toast(this.$t('common.mimabushaoyu'));
            return;
        }
        this.query.password = this.$md5(this.password1)
        const ret = await this.$http({
            url: "/wallet/withdrawalrecord/create",
            method: "post",
            data: this.query,
        });
        if (ret.data.code === 0) {
            //
            Toast(this.$t('common.tishengqing'));
            setTimeout(()=>{
            this.$router.push('/capital')
            },1500)
        } else {
            //
        }
    },
    async sendEmailCode() {
      if (this.sendEmailText !== this.$t('common.fasongyanzhengma') ) {
        return;
      }
      this.sendEmailText = 60;
      const timer = setInterval(() => {
        if (this.sendEmailText === 0) {
          clearInterval(timer);
          this.sendEmailText = this.$t('common.fasongyanzhengma') ;
        }else{
          this.sendEmailText -= 1;

        }
      }, 1000);
      const ret = await this.$http({
        url: `/wallet/email/sendEmail`,
        method: "post",
        data: this.query,
      });
      if (ret.data.code === 0) {
        Toast(this.$t('common.fasongcheng'));
      } 
    },
  },
};
</script>

<style scoped lang="scss">
.security {
  margin: 0;
  padding: 0;
  height: 216.53vw;
  background-color: #090A1B;
  .top {
    width: 100vw;
    height: 11.73vw;
    background-color: #090A1B;
    color: rgba(255, 255, 255, 100);
    font-size: 4.8vw;
    //font-family: Microsoft Yahei;
    p {
      position: relative;
      bottom: 3.2vw;
    }
    img {
      position: relative;
      right: 44.8vw;
      top: 3.2vw;
      width: 5.3vw;
      height: 5.3vw;
      z-index: 100;
    }
  }
  .titlea {
    height: 19.06vw;
    p {
      width: 96.26vw;
      height: 4.53vw;
      color: rgba(135, 139, 151, 100);
      font-size: 3.2vw;
      text-align: left;
      font-family: PingFangSC-regular;
      position: relative;
      top: 6.4vw;
      left: 4.2vw;
      letter-spacing: 0.2vw;
    }
  }
  .inputa {
    width: 91.46vw;
    height: 13.86vw;
    border-radius: 0.5vw;
    background-color: rgba(45, 47, 59, 100);
    margin-left: 4.26vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    input {
      background-color: rgba(45, 47, 59, 100);
      height: 7.46vw;
      width: 54.4vw;
      font-size: 3.73vw;
      margin-left: 4.26vw;
      border-width: 0;
      letter-spacing: 0.1vw;
    }
    p {
      width: 25.46vw;
      color: rgba(10, 122, 255, 100);
      font-size: 3.73vw;
      text-align: right;
      font-family: PingFangSC-regular;
      margin-right: 4.26vw;
      letter-spacing: 0.1vw;
    }
  }
  .titleb {
    height: 17.33vw;
    p {
      height: 4.53vw;
      color: rgba(135, 139, 151, 100);
      font-size: 3.2vw;
      font-family: PingFangSC-regular;
      display: flex;
      justify-content: flex-start;
      left: 4.2vw;
      position: relative;
      top: 10.66vw;
      letter-spacing: 0.2vw;
    }
  }
  .inputb {
    width: 91.46vw;
    height: 13.86vw;
    border-radius: 0.5vw;
    background-color: rgba(45, 47, 59, 100);
    margin-left: 4.2vw;
    display: flex;
    align-items: center;
    input {
      background-color: rgba(45, 47, 59, 100);
      width: 70.4vw;
      font-size: 3.73vw;
      margin-left: 4.26vw;
      border-width: 0;
      letter-spacing: 0.1vw;
    }
  }
  .button {
    width: 91.46vw;
    height: 9.6vw;
    line-height: 5.33vw;
    border-radius: 1.33vw;
    background-color: rgba(10, 122, 255, 100);
    color: rgba(255, 255, 255, 100);
    font-size: 3.73vw;
    text-align: center;
   //font-family: Arial;
    margin-top: 8.53vw;
  }
}
</style>